<template>
  <textarea id="text1" style="width: 100%; height: 200px"></textarea>
  <div id="toolbar-container" class="toolbar">
    <p>初始化的内容</p>
    <p>初始化的内容</p>
  </div>
  <a-button @click="send">提交</a-button>
  <a-button @click="xss_send">提交xss</a-button>
  <!-- <p>------ 我是分割线 ------</p>
  <div id="text-container" class="text"></div> -->
</template>
<script>
import { message } from "ant-design-vue";
import axios from "axios";
import xss from "xss";
import Editor from "@/utils/editor";
export default {
  name: "entry_index",
  data() {
    return {
      text: "",
      xss: "",
    };
  },
  mounted() {
    const text1 = document.getElementById("text1");
    const self = this;
    const { editor } = new Editor("#toolbar-container", {
      linkImgCallback: function (src, alt, href) {
        console.log("图片 src ", src);
        console.log("图片文字说明", alt);
        console.log("跳转链接", href);
      },

      // 自定义检查插入视频的回调
      onlineVideoCallback: function (video) {
        // 自定义回调内容，内容成功插入后会执行该函数
        console.log("插入视频内容", video);
      },
      // 自定义检查插入的链接
      linkCheck: function (text, link) {
        // 以下情况，请三选一
        // 1. 返回 true ，说明检查通过
        return true;
        // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）
        // return '链接有 xxx 错误'
        // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。
        // 此处，你可以自定义提示错误信息，自由发挥
      },
      linkImgCheck: function (imgSrc, alt, href) {
        // 以下情况，请三选一
        // 1. 返回 true ，说明检查通过
        return true;
        // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止图片插入。会 alert 出错误信息（即返回的字符串）
        // return '图片 src 有 xxx 错误'
        // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止图片插入。
        // 此处，你可以自定义提示错误信息，自由发挥
      },
      // 自定义检查插入视频的链接
      onlineVideoCheck: function (video) {
        // 编辑器会根据返回的内容做校验：比如以下几种情况
        // 1. 返回 true ，说明检查通过
        return true;
        // 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）
        // return '插入的视频 有 xxx 错误'
        // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。
        // 此处，你可以自定义提示错误信息，自由发挥
      },
      customUploadImg: function (resultFiles, insertImgFn) {
        console.log();
        Array.from(resultFiles).map((res) => {
          let form = new FormData();
          form.append("file", res);
          axios({
            url: "http://localhost:3000/table/upload/unanth",
            method: "post",
            data: form,
          }).then((_) => {
            console.log(_);
            insertImgFn(_.data.url);
          });
        });
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        // 上传图片，返回结果，将图片插入到编辑器中
      },
      onblur: function (newHtml) {
        console.log("onblur", newHtml); // 获取最新的 html 内容
      },
      onfocus: function (newHtml) {
        console.log("onfocus", newHtml); // 获取最新的 html 内容
      },

      Alert: function (s, t) {
        console.log(s, t);
        switch (t) {
          case "success":
            message.success(s);
            break;
          case "info":
            message.info(s);
            break;
          case "warning":
            message.warning(s);
            break;
          case "error":
            message.error(s);
            break;
          default:
            message.info(s);
            break;
        }
      },
      // 默认情况下，只有 IE 和 旧版 Edge 会使用兼容模式，如果需要在其它浏览器上也使用兼容模式，可以在函数内进行判定
      compatibleMode: function () {
        // 返回 true 表示使用兼容模式；返回 false 使用标准模式
        return true;
      },
      onchange: function (html) {
        editor.config.Alert(html);
        // 第二步，监控变化，同步更新到 textarea
        text1.innerHTML = self.str_code(html);
        self.text = self.HTMLEncode(editor.txt.html()); // html字符串 转义大小箭头
        self.xss = xss(self.HTMLEncode(editor.txt.html()));
      },
    });
    this.editor = editor;
    // 插入网络图片的回调

    editor.create();

    editor.txt.html(
      this.HTMLEncode("用 JS 设置的内容</p>!@$^&$%*^(^&(*^?><///\\\|{}^*&%(^(*")
    );
    editor.txt.append("<p style='color:red;'>追加的内容</p>");
    // console.log(JSON.stringify(editor.txt.html()));
    // editor.txt.html(xxs(editor.txt.html()));
    // console.log(editor.txt.text());
    // console.log(editor.txt.getJSON());
    // editor.txt.clear()
  },
  methods: {
    send() {
      axios({
        url: "http://localhost:3000/textxss/index",
        method: "post",
        data: {
          text: this.text,
        },
      }).then((_) => {
        this.editor.txt.append(this.HTMLDecode(_.data.text)); // html字符串转义赋值html 输出html文本
      });
    },
    xss_send() {
      axios({
        url: "http://localhost:3000/textxss/index",
        method: "post",
        data: {
          text: this.xss,
        },
      }).then((_) => {
        this.editor.txt.append(this.HTMLDecode(xss(_.data.text)));
      });
    },
    str_code(code) {
      var temp = document.createElement("div");
      temp.innerHTML = code;
      return temp.textContent != null ? temp.textContent : temp.innerText;
    },
    HTMLEncode(html) {
      var temp = document.createElement("div");
      temp.textContent != null
        ? (temp.textContent = html)
        : (temp.innerText = html);
      var output = temp.innerHTML;
      temp = null;
      return output;
    },
    //HTML反转义
    HTMLDecode(text) {
      var temp = document.createElement("div");
      temp.innerHTML = text;
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
  },
};
</script>
<style>
font[size="4"] {
  font-size: 18px;
}
</style>
